<template>
  <div>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>
<script>
import mapJson from './response_1611035255113.json'
export default {
  data () {
    return {
      mapJson,
      key: '1a47f169ed055ea39d2b8592e3059f17',
      nMap: null, // 地图实例
      defaultStyle: { // 地图默认样式
        mapStyle: 'amap://styles/darkblue', // 设置地图的显示样式
        zoom: 10, // 地图显示的缩放级别
        center: [120.777221, 30.792882], // 中心坐标点
        zooms: [3, 18], // 地图显示的缩放级别范围
        animateEnable: true, // 地图平移过程中是否使用动画
        rotateEnable: true, // 地图是否可旋转
        dragEnable: true, // 地图是否可通过鼠标拖拽平移
        zoomEnable: true, // 地图是否可缩放
        viewMode: '3D',
        pitch: 30, // 俯仰角度
        pitchEnable: true, // 是否允许设置俯仰角度
        showLabel: false // 隐藏文字
      },
      polygonList: [], // 行政区覆盖物数据
      mapColors: ['#22D900', '#3CBEFF', '#FFEA7C', '#FF7E1D', '#FF0000'], // 覆盖物填充色数组
      infoWindow: null
    }
  },
  components: {

  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.loadScript()
    },
    /**
     * 加载脚本
     */
    loadScript () {
      var url = `https://webapi.amap.com/maps?v=1.4.15&key=${this.key}&callback=onLoad`
      // createElement创建新的元素
      var jsapi = document.createElement('script')
      jsapi.charset = 'utf-8'
      jsapi.src = url
      // appendChild父元素里面添加子元素
      document.head.appendChild(jsapi)
      window.onLoad = () => {
        // 地图实例
        this.nMap = new AMap.Map('container', this.defaultStyle)
        if (this.mapJson.resultObj.length > 0) {
          this.polygonList = this.setPolygon()
        }
      }
    },
    /**
     * 设置覆盖物
     */
    setPolygon (list = this.mapJson.resultObj) {
      const polygonList = list.map(item => {
        const color = this.mapColors[item.code - 1]
        const { areaName } = item
        const polygon = new AMap.Polygon({
          path: JSON.parse(item.mapCoordinate), // 节点坐标数组
          strokeColor: color || 'blue', // 线条颜色
          strokeOpacity: 1, // 轮廓线透明度
          strokeWeight: 1, // 轮廓线宽度
          strokeStyle: 'solid', // 轮廓线样式
          fillColor: color || 'blue', // 多边形填充颜色
          fillOpacity: 0.3, // 多边形透明度
          extData: { // 自定义属性
            data: item
          }
        })
        // this.createMarkerContent(item)
        var marker = new AMap.Marker({
          content: `<div class="marker-container">
          <div class="marker-container-label" style="background-color: ${color}" data-text="${areaName}">
            <span class="label-bg"></span>
            <i class="conre conre-1" style="border-color: ${color}"></i>
            <i class="conre conre-2" style="border-color: ${color}"></i>
            <i class="conre conre-3" style="border-color: ${color}"></i>
            <i class="conre conre-4" style="border-color: ${color}"></i>
          </div>
          <div class="marker-container-line">
            <div class="line-inside" style="background: linear-gradient(0deg, ${color} 0%, transparent 100%)"></div>
          </div>
          <div class="marker-container-circle">
            <div class="circle-inside"></div>
          </div>
          </div>`, // 自定义点标记覆盖物内容
          position: JSON.parse(item.mapMainCoordinate), // 基点位置
          offset: new AMap.Pixel(-40, -150) // 相对于基点的偏移位置
        })
        this.infoWindow = new AMap.InfoWindow({
          isCustom: true, // 自定义窗体
          offset: new AMap.Pixel(24, -145)
        })
        // 鼠标移入标记
        marker.on('mouseover', () => {
          this.infoWindow.setContent(this.createInfoWindow(item))
          this.infoWindow.open(this.nMap, marker.getPosition())
        })
        // 鼠标移出标记
        marker.on('mouseout', () => {
          // 关闭信息窗体
          this.infoWindow.close()
        })
        // 鼠标移入覆盖物
        polygon.on('mouseover', () => {
          this.highlightPolygon(polygon, true)
        })
        // 鼠标移出覆盖物
        polygon.on('mouseout', () => {
          this.highlightPolygon(polygon, false)
        })
        // 在指定地图上显示当前的多边形
        polygon.setMap(this.nMap)
        marker.setMap(this.nMap)
        return polygon
      })
      return polygonList
    },
    /**
     * 自定义标记内容
     * @param {Object} info
     */
    createMarkerContent (info) {
      const node = document.createElement('div')
      node.classList.add('marker-container')
      // node.setAttribute()
      node.innerHTML = ''
      return node
    },
    /**
     * 自定义信息窗体
     * @param {Object} info
     */
    createInfoWindow (info) {
      const node = document.createElement('div')
      node.classList.add('info-window')
      node.style.background = this.mapColors[info.code - 1]
      node.innerHTML = `<div>${info.areaName}详情</div>`
      return node
    },
    /**
     * 行政区高亮
     * @param {Object} polygon
     * @param {Object} state
     */
    highlightPolygon (polygon, state) {
      this.polygonList.map(item => {
        item.setOptions({
          fillOpacity: state ? (item === polygon ? 0.9 : 0.3) : 0.3,
          strokeWeight: state ? (item === polygon ? 3 : 1) : 1
        })
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  #container{
    width: 100%;
    height: 90vh;
  }
  ::v-deep{
    $circleColor: #3bbdff;
    $mapBgColor: #0f6000;
    .marker-container{
      pointer-events: none;
      .marker-container-label{
        position: relative;
        color: #fff;
        padding: 8px 0;
        text-align: center;
        width: 90px;
        pointer-events: painted;
        .label-bg{
          background-color: $mapBgColor;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 1px solid rgba(255, 255, 255, 0.2);
          opacity: .4;
        }
        .conre{
          width: 10px;
          height: 10px;
          border-style: solid;
          border-width: 0px;
          position: absolute;
        }
        .conre-1{
          top: -1px;
          left: -1px;
          border-top-width: 5px;
          border-left-width: 5px;
        }
        .conre-2{
          top: -1px;
          right: -1px;
          border-top-width: 5px;
          border-right-width: 5px;
        }
        .conre-3{
          bottom: -1px;
          left: -1px;
          border-bottom-width: 5px;
          border-left-width: 5px;
        }
        .conre-4{
          bottom: -1px;
          right: -1px;
          border-bottom-width: 5px;
          border-right-width: 5px;
        }
        &::after{
          content: attr(data-text); // attr()获取当前元素的属性
          font-weight: bold;
          font-size: 16px;
          position: relative;
        }
      }
      .marker-container-line{
        width: 2px;
        height: 100px;
        transform: translateY(10px);
        margin: auto;
        .line-inside{
          width: 100%;
          height: 100%;
          animation: hideLine 1s infinite;
        }
      }
      .marker-container-circle{
        width: 40px;
        height: 40px;
        border: 2px solid $circleColor;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        opacity: .6;
        transform: rotateX(50deg) translateZ(14px);
        animation: hideCircle 2s infinite ease-out;
        .circle-inside{
          width: 20px;
          height: 20px;
          background-color: $circleColor;
          border-radius: 50%;
        }
      }
    }
    .info-window{
      position: relative;
      top: 20px;
      left: 0;
      width: 250px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      font-size: 14px;
      padding: 10px 15px;
    }
  }
::v-deep .amap-marker:nth-child(2n) .marker-container-circle {
  animation-delay: 0.3s;
}
@for $i from 1 through 9 {
  ::v-deep .amap-marker:nth-child(#{$i}) .marker-container-line .line-inside {
    animation-duration: 1.6s;
    animation-delay: 1.6s * $i;
  }
}
@keyframes hideLine{
  0%{
    height: 0;
  }
  100%{
    height: 80px;
  }
}
@keyframes hideCircle{
  80%{
    opacity: 0;
  }
  100%{
    opacity: 0.6;
  }
}
</style>
